<template>
  <div>
    <el-row>
      <h1 align="left">创建表格</h1>
    </el-row>
    <hr>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="表名">
        <el-input placeholder="请输入表名" v-model="send_data.table_name"></el-input>
      </el-form-item>
      <el-form-item label="表格">
        <el-select v-model="send_data.selected_table"
                   multiple placeholder="请选择" filterable style="width: 100%">
          <el-option
            v-for="item in this.$store.state.sql_table_names"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联">
        <el-row v-show="send_data.constraint.length>0">
          <el-tag
            v-for="tag in send_data.constraint"
            :key="tag.name"
            @close="handleClose(tag)"
            closable>
            {{tag.name}}
          </el-tag>
        </el-row>
        <el-row>
          <el-cascader style="width:44%;"
                       expand-trigger="hover"
                       :options="table_options"
                       v-model="selectedColumn1">
          </el-cascader>
          =
          <el-cascader style="width:44%;"
                       expand-trigger="hover"
                       :options="table_options"
                       v-model="selectedColumn2">
          </el-cascader>
          <el-button style="width:10%;" @click="add_constraint()"> 添加</el-button>
        </el-row>
      </el-form-item>
      <el-form-item label="约束">
        <el-row v-show="send_data.raw_constraint.length>0">
          <el-tag
            v-for="tag in send_data.raw_constraint"
            :key="tag"
            @close="send_data.raw_constraint.splice(send_data.raw_constraint.indexOf(tag), 1);"
            closable>
            {{tag}}
          </el-tag>
        </el-row>
        <el-row>
          <el-input style="width:100%;" placeholder="输入约束语句并回车，添加约束"
                    v-model="raw_constraint" @keyup.enter.native="save_raw()">
          </el-input>
        </el-row>
      </el-form-item>
      <el-form-item label="分页">
        <el-row>
          <el-col :span="7">
            <el-select v-model="send_data.page_order" style="width:100%;" placeholder="请选择">
              <el-option
                v-for="item in ['从小到大','从大到小']"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-cascader style="width:100%;"
                         expand-trigger="hover"
                         :options="table_options"
                         v-model="send_data.split_page">
            </el-cascader>
          </el-col>
          <el-col :span="10">
            <el-slider v-model="send_data.page_size"  style="margin-left: 10px"
                       :format-tooltip="(val)=> '每页'+val+'个'"></el-slider>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="显示列">
        <el-row v-show="send_data.show_col.length>0">
          <el-tag
            v-for="tag in send_data.show_col"
            :key="tag"
            @close="send_data.show_col.splice(send_data.show_col.indexOf(tag), 1);"
            closable>
            {{'【'+tag.showType+'】'+tag.name+':'+tag.col}}
          </el-tag>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-input placeholder="显示列名" v-model="showName"></el-input>
          </el-col>
          <el-col :span="7">
            <el-select v-model="showType" placeholder="请选择">
              <el-option
                v-for="item in show_col_type"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-cascader
                         expand-trigger="hover"
                         :options="table_options"
                         v-model="selectedColumn3">
            </el-cascader>
          </el-col>
          <el-col :span="3">
            <el-button @click="add_show_col()"> 添加</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="分组">
        <el-cascader style="width:44%;"
                     expand-trigger="hover"
                     :options="table_options"
                     v-model="send_data.group_col">
        </el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'TableCreate',
  data() {
    return {
      send_data: {
        selected_table: [],
        constraint: [],
        raw_constraint: [],
        table_name: '',
        page_order: '',
        split_page: [],
        page_size: 20,
        show_col: [],
        group_col: [],
      },
      table_options: [],
      selectedColumn1: [],
      selectedColumn2: [],
      raw_constraint: '',
      selectedColumn3: [],
      show_col_type: ['原始内容', '计数', '求和'],
      showType: '',
      showName: '',
    };
  },
  methods: {
    add_constraint() {
      const tb1 = `${this.selectedColumn1[0]}.${this.selectedColumn1[0]}`;
      const tb2 = `${this.selectedColumn2[0]}.${this.selectedColumn2[0]}`;
      this.send_data.constraint.push({ name: `${tb1}=${tb2}`, value: [tb1, tb2] });
    },
    handleClose(tag) {
      this.send_data.constraint.splice(this.send_data.constraint.indexOf(tag), 1);
    },
    save_raw() {
      this.send_data.raw_constraint.push(this.raw_constraint);
    },
    add_show_col() {
      this.send_data.show_col.push({
        name: this.showName,
        showType: this.showType,
        col: this.selectedColumn3,
      });
    },
  },
  watch: {
    'send_data.selected_table': function (to) {
      debugger;
      this.table_options = [];
      for (let i = 0; i < to.length; i++) {
        axios.get('/api/sql/fields', { params: { table: to[i] } }).then((res) => {
          const tr = { value: to[i], label: to[i] };
          tr.children = [];
          for (let j = 0; j < res.data.length; j++) {
            tr.children.push({
              value: res.data[j].name,
              label: res.data[j].name,
            });
          }
          this.table_options.push(tr);
        });
      }
    },
  },
};
</script>

<style scoped>

</style>
